import { ref } from "vue";
import { viewType, queryType } from "./data";
import { getCodeColumns, getModuleName } from "@/api/tools";
import { getRoleMenu } from "@/api/system";
import { handleTree } from "@/utils/tree";
import { getDictList } from "@/api/data";
export function useColumns() {
  const dataList = ref([]);
  const dictType = ref([]);
  const menuOptions = ref([]);
  const moduleName = ref([]);

  const columns: TableColumnList = [
    {
      label: "排序",
      prop: "sort",
      minWidth: 80,
      cellRenderer: ({ row }) => (
        <el-input-number
          v-model={row.sort}
          size="small"
          controls-position="right"
        />
      )
    },
    {
      label: "字段名称",
      prop: "column_name",
      minWidth: 80,
      cellRenderer: ({ row }) => row.column_name
    },
    {
      label: "字段描述",
      prop: "column_comment",
      cellRenderer: ({ row }) => (
        <el-input v-model={row.column_comment} clearable />
      )
    },
    {
      label: "物理类型",
      prop: "column_type",
      cellRenderer: ({ row }) => row.column_type
    },
    {
      label: "必填",
      prop: "is_required",
      cellRenderer: ({ row }) => (
        <el-checkbox
          true-value="1"
          false-value="2"
          v-model={row.is_required}
          checked={row.is_required == 2 ? true : false}
        ></el-checkbox>
      )
    },
    {
      label: "插入",
      prop: "is_insert",
      cellRenderer: ({ row }) => (
        <el-checkbox
          true-value="1"
          false-value="2"
          v-model={row.is_insert}
          checked={row.is_insert == 2 ? true : false}
        ></el-checkbox>
      )
    },
    {
      label: "编辑",
      prop: "is_edit",
      cellRenderer: ({ row }) => (
        <el-checkbox
          true-value="1"
          false-value="2"
          v-model={row.is_edit}
          checked={row.is_edit == 2 ? true : false}
        ></el-checkbox>
      )
    },
    {
      label: "列表",
      prop: "is_list",
      cellRenderer: ({ row }) => (
        <el-checkbox
          true-value="1"
          false-value="2"
          v-model={row.is_list}
          checked={row.is_list == 2 ? true : false}
        ></el-checkbox>
      )
    },
    {
      label: "查询",
      prop: "is_query",
      cellRenderer: ({ row }) => (
        <el-checkbox
          true-value="1"
          false-value="2"
          v-model={row.is_query}
          checked={row.is_query == 2 ? true : false}
        ></el-checkbox>
      )
    },
    {
      label: "排序",
      prop: "is_sort",
      cellRenderer: ({ row }) => (
        <el-checkbox
          true-value="1"
          false-value="2"
          v-model={row.is_sort}
          checked={row.is_sort == 2 ? true : false}
        ></el-checkbox>
      )
    },
    {
      label: "查询方式",
      prop: "query_type",
      cellRenderer: ({ row }) => (
        <el-select v-model={row.query_type} clearable placeholder="请选择方式">
          {queryType.map(item => {
            return (
              <el-option
                key={item.value}
                label={item.label}
                value={item.value}
              />
            );
          })}
        </el-select>
      )
    },
    {
      label: "页面控件",
      prop: "view_type",
      cellRenderer: ({ row }) => (
        <el-select v-model={row.view_type} clearable placeholder="请选择控件">
          {viewType.map(item => {
            return (
              <el-option
                key={item.value}
                label={item.label}
                value={item.value}
              />
            );
          })}
        </el-select>
      )
    },
    {
      label: "数据字典",
      prop: "dict_type",
      cellRenderer: ({ row }) => (
        <el-select
          v-model={row.dict_type}
          disabled={
            !["select", "checkbox", "radio"].includes(row.view_type)
              ? true
              : false
          }
          clearable
          placeholder="请选择字典"
        >
          {dictType.value.map(item => {
            return (
              <el-option key={item.id} label={item.name} value={item.code} />
            );
          })}
        </el-select>
      )
    }
  ];

  async function onSearch(id) {
    const { data: codeColumns } = await getCodeColumns({ table_id: id });
    dataList.value = codeColumns;
    const { data: menuList } = await getRoleMenu();
    menuOptions.value = handleTree(menuList);
    const { data: dictTypeList } = await getDictList({ pageSize: 999 });
    dictType.value = dictTypeList.list;
    const { data: moduleNames } = await getModuleName();
    moduleName.value = moduleNames;
  }

  return {
    onSearch,
    columns,
    dataList,
    moduleName,
    menuOptions
  };
}
